<template>
  <div>
    <c-title :hide="false" :text="'简介'"></c-title>
    <div class="top-box">

    </div>
    <div class="content" :class="[fun.getPhoneEnv() == 3 ? 'set-pc-styleLeft' : '']">
      <div class="staff-info">
        <div class="avatar">
          <img :src="serviceData.avatar" alt="">
        </div>
        <div class="flex" style="flex-direction: column; flex: 1; text-align: left;">
          <p class="name">{{serviceData.nickname}}</p>
          <div class="d-f" style="flex-wrap: wrap;" v-if="serviceData.tags">
            <div class="job_color tag_1" v-for="(str, i) in serviceData.tags" :key="i">{{ str }}</div>
          </div>
        </div>
      </div>
      <div style="margin: 6px 0 12px 0; font-size: 12px;" class="line-clamp-2">{{serviceData.sketch}}</div>
      <h1 class="title">个人简介</h1>
      <div id="a_content" class="profile-text" v-html="serviceData.desc"></div>
      <p class="profile-text" v-if="!serviceData.desc">暂无简介</p>
    </div>

    <footer class="foot" :class="[fun.getPhoneEnv() == 3 ? 'set-pc-styleLeft' : '']">
      <div class="i-home" @click="toHome">
        <i class="iconfont icon-fontclass-shouye1"></i>
        <div style="margin-left: -5px;">首页</div>
      </div>
      <div class="btn-chat" @click="toChat">{{serviceData.launch_chat_name ||'发起聊天'}}</div>
    </footer>
  </div>
</template>

<script>
export default {
  data() {
    return {
      id: "",
      serviceData: {}
    };
  },

  activated() {
    this.id = this.$route.query.id;
    this.getData();
  },

  methods: {
    toChat() {
      window.location.href = this.serviceData.h5_page_url;
    },
    toHome() {
      this.$router.push(this.fun.getUrl("home"));
    },
    getData() {
      $http
        .get("plugin.yun-chat.frontend.h5.employee.get-detail", {id: this.id}, " ")
        .then(
          response => {
            if (response.result === 1) {
              this.serviceData = response.data || {};
            }
          },
          (response)=> {
            console.log(response);
          }
        )
        .catch(err => {
          console.log(err);
        });
    }
  },
  components: {
  }
};
</script>
<style lang="scss" rel="stylesheet/scss" scoped>
.d-f {
  display: flex;
  align-items: center;
}

.top-box {
  width: 100%;
  height: 8rem;
  padding-top: 1.5rem;
  padding-bottom: 3.3rem;
  background-image: linear-gradient(90deg, #66b3ff 0%, #0b79f0 100%), linear-gradient(-50deg, #3265ff 0%, #45b2ff 100%);
  background-blend-mode: normal, normal;
}

.staff-info {
  display: flex;

  .avatar {
    width: 4.25rem;
    height: 4.25rem;
    background-color: #b9bbbb;
    overflow: hidden;
    border-radius: 50%;
    margin: -2.125rem 0.75rem 0 0;

    img {
      width: 100%;
      height: 100%;
    }
  }

  .name {
    font-weight: bold;
    font-size: 18px;
    margin-bottom: 4px;
    color: #1e1e1e;
  }
}

.content {
  // overflow-y: scroll;
  position: fixed;
  width: 100%;
  height: calc(100vh - 8rem);
  background: #fff;
  bottom: 0;
  left: 0;
  border-radius: 20px 20px 0 0;
  padding: 10px 15px 3.5rem 15px;
  text-align: left;
  display: flex;
  flex-direction: column;

  .title {
    position: relative;
    font-size: 1.06rem;
    color: #3b98f7;
    padding-left: 1rem;
  }

  .title::after {
    content: '';
    position: absolute;
    top: 20%;
    left: 0;
    height: 80%;
    width: 0.2rem;
    border-radius: 0.09rem;
    background-color: #3b97f7;
  }

  .profile-text {
    display: block;
    margin-top: 1rem;
    font-size: 14px;
    overflow-y: scroll;
  }
  .profile-text::-webkit-scrollbar { width: 0 !important; }

  .tag_1 {
    padding: 0 5px;
    line-height: 18px;
    margin-right: 5px;
    font-size: 12px;
    margin-bottom: 4px;
    color: #fff;
    background-color: #ea940e;
    border-radius: 3px;
  }
}

.foot {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 3rem;
  display: flex;
  align-items: center;
  justify-content: space-evenly;
  background-color: #fff;
  border-top: 1px solid #f2f2f2;

  .i-home {
    text-align: center;
    color: #777;
  }

  .btn-chat {
    width: 15.63rem;
    height: 2.38rem;
    line-height: 2.38rem;
    background-color: #3b97f7;
    border-radius: 1.19rem;
    color: #fff;
  }
}
</style>
